<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>改票 - 影院订票系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .change-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem 0;
        }
        .change-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
            overflow: hidden;
        }
        .current-ticket {
            background: #f8f9fa;
            border-left: 4px solid #dc3545;
        }
        .new-ticket {
            background: #f8f9fa;
            border-left: 4px solid #28a745;
        }
        .showtime-option {
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .showtime-option:hover {
            border-color: #667eea;
            background: #f8f9fa;
        }
        .showtime-option.selected {
            border-color: #667eea;
            background: #e7f3ff;
        }
        .price-diff {
            font-weight: bold;
        }
        .price-diff.positive {
            color: #dc3545;
        }
        .price-diff.negative {
            color: #28a745;
        }
        .fee-notice {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 5px;
            padding: 1rem;
            margin: 1rem 0;
        }
        .movie-poster {
            width: 100px;
            height: 140px;
            object-fit: cover;
            border-radius: 8px;
        }
    </style>
</head>
<body class="bg-light">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand fw-bold text-primary" href="${pageContext.request.contextPath}/movies">
                <i class="fas fa-film me-2"></i>影院订票系统
            </a>
            
            <div class="navbar-nav ms-auto">
                <div class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                        <i class="fas fa-user me-1"></i>${sessionScope.user.username}
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/user/orders">
                            <i class="fas fa-ticket-alt me-2"></i>我的订单
                        </a></li>
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/user/profile">
                            <i class="fas fa-user-edit me-2"></i>个人信息
                        </a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/logout">
                            <i class="fas fa-sign-out-alt me-2"></i>退出登录
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- 改票头部 -->
    <section class="change-header">
        <div class="container">
            <div class="d-flex align-items-center">
                <a href="${pageContext.request.contextPath}/user/orders?action=detail&orderNo=${order.orderNo}" 
                   class="btn btn-light me-3">
                    <i class="fas fa-arrow-left me-1"></i>返回订单详情
                </a>
                <div>
                    <h2><i class="fas fa-exchange-alt me-2"></i>改票</h2>
                    <p class="mb-0">订单号：${order.orderNo}</p>
                </div>
            </div>
        </div>
    </section>

    <div class="container mt-4">
        <!-- 错误信息 -->
        <c:if test="${not empty error}">
            <div class="alert alert-danger" role="alert">
                <i class="fas fa-exclamation-triangle me-2"></i>${error}
            </div>
        </c:if>

        <!-- 改票规则说明 -->
        <div class="change-card">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>改票规则</h5>
            </div>
            <div class="card-body">
                <ul class="mb-0">
                    <li>开场前1小时以上：可以免费改票</li>
                    <li>开场前30分钟-1小时：可以改票，需要额外补交20%差额</li>
                    <li>开场前30分钟内：无法改票</li>
                    <li>只能改换同一电影的不同场次，不能改换影院位置和影片</li>
                </ul>
                
                <c:if test="${timeStatus == 'WITHIN_30_MINUTES'}">
                    <div class="fee-notice mt-3">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>注意：</strong>您的票务在开场前30分钟-1小时内，改票需要额外补交20%差额费用。
                    </div>
                </c:if>
            </div>
        </div>

        <!-- 当前票务信息 -->
        <div class="change-card current-ticket">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-ticket-alt me-2"></i>当前票务信息</h5>
            </div>
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-md-2">
                        <img src="${order.showtime.movie.posterUrl != null ? order.showtime.movie.posterUrl : '/images/default-poster.jpg'}" 
                             class="movie-poster" alt="${order.showtime.movie.title}">
                    </div>
                    <div class="col-md-10">
                        <h6>${order.showtime.movie.title}</h6>
                        <p class="mb-1"><strong>影院：</strong>${order.showtime.cinema.name}</p>
                        <p class="mb-1"><strong>影厅：</strong>${order.showtime.hall.name}</p>
                        <p class="mb-1"><strong>时间：</strong>
                            <fmt:formatDate value="${order.showtime.showDate}" pattern="yyyy年MM月dd日"/>
                            <fmt:formatDate value="${order.showtime.showTime}" pattern="HH:mm"/>
                        </p>
                        <p class="mb-1"><strong>票数：</strong>${order.ticketCount} 张</p>
                        <p class="mb-0"><strong>价格：</strong>¥${order.showtime.price} × ${order.ticketCount} = ¥${order.totalAmount}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 可选场次 -->
        <div class="change-card new-ticket">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-calendar-alt me-2"></i>选择新场次</h5>
            </div>
            <div class="card-body">
                <c:if test="${empty availableShowtimes}">
                    <div class="text-center py-4">
                        <i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
                        <p class="text-muted">暂无其他可选场次</p>
                    </div>
                </c:if>
                
                <c:if test="${not empty availableShowtimes}">
                    <form id="changeTicketForm" method="post" action="${pageContext.request.contextPath}/user/orders">
                        <input type="hidden" name="action" value="changeTicket">
                        <input type="hidden" name="orderNo" value="${order.orderNo}">
                        
                        <c:forEach var="showtime" items="${availableShowtimes}">
                            <div class="showtime-option" onclick="selectShowtime(this, ${showtime.id})">
                                <input type="radio" name="newShowtimeId" value="${showtime.id}" style="display: none;">
                                <div class="row align-items-center">
                                    <div class="col-md-8">
                                        <div class="d-flex align-items-center">
                                            <div class="me-3">
                                                <i class="fas fa-calendar me-1"></i>
                                                <fmt:formatDate value="${showtime.showDate}" pattern="MM月dd日"/>
                                            </div>
                                            <div class="me-3">
                                                <i class="fas fa-clock me-1"></i>
                                                <fmt:formatDate value="${showtime.showTime}" pattern="HH:mm"/>
                                            </div>
                                            <div class="me-3">
                                                <i class="fas fa-home me-1"></i>
                                                ${showtime.hall.name}
                                            </div>
                                            <div>
                                                <i class="fas fa-users me-1"></i>
                                                余票${showtime.availableSeats}张
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 text-end">
                                        <div class="mb-1">
                                            <strong>¥${showtime.price}</strong>
                                        </div>
                                        <c:set var="priceDiff" value="${showtime.price - order.showtime.price}" />
                                        <c:if test="${priceDiff != 0}">
                                            <div class="price-diff ${priceDiff > 0 ? 'positive' : 'negative'}">
                                                ${priceDiff > 0 ? '+' : ''}¥${priceDiff}
                                                <c:if test="${timeStatus == 'WITHIN_30_MINUTES' && priceDiff > 0}">
                                                    <br><small>(+20%手续费)</small>
                                                </c:if>
                                            </div>
                                        </c:if>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                        
                        <div class="text-center mt-4">
                            <button type="submit" class="btn btn-primary btn-lg" id="confirmChangeBtn" disabled>
                                <i class="fas fa-exchange-alt me-2"></i>确认改票
                            </button>
                            <a href="${pageContext.request.contextPath}/user/orders?action=detail&orderNo=${order.orderNo}" 
                               class="btn btn-secondary btn-lg ms-3">
                                <i class="fas fa-times me-2"></i>取消
                            </a>
                        </div>
                    </form>
                </c:if>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function selectShowtime(element, showtimeId) {
            // 移除其他选中状态
            document.querySelectorAll('.showtime-option').forEach(option => {
                option.classList.remove('selected');
            });
            
            // 添加选中状态
            element.classList.add('selected');
            
            // 选中对应的radio button
            element.querySelector('input[type="radio"]').checked = true;
            
            // 启用确认按钮
            document.getElementById('confirmChangeBtn').disabled = false;
        }
        
        // 表单提交确认
        document.getElementById('changeTicketForm').addEventListener('submit', function(e) {
            if (!confirm('确定要改票吗？改票后将无法撤销。')) {
                e.preventDefault();
            }
        });
    </script>
</body>
</html>
